export default {
    //安装方法
    install(Vue) {
        //Vue指令注册 
        Vue.directive('text-scroll', {
            // 当被绑定的内容插入到 DOM 中时……
            inserted: function (el, binding) {
                //计算容器宽度
                var boxWidth = el.clientWidth
                //创建存放文本的元素
                var textNode = createTextNode(binding.value)
                //将存放文本的元素插入到容器中
                el.appendChild(textNode)
                //计算文本宽度
                var textNodeWidth = textNode.clientWidth
                //初始化滚动
                initScroll(el, textNode, boxWidth, textNodeWidth)
            },
            update: function (el, binding) {
                //找到定时器id
                var timer = el.scroll_id
                //清除定时器
                clearInterval(timer)
                //移除原文本元素
                el.removeChild(el.children[0])
                //计算容器宽度
                var boxWidth = el.clientWidth
                //创建存放文本的元素
                var textNode = createTextNode(binding.value)
                //将存放文本的元素插入到容器中
                el.appendChild(textNode)
                //计算文本宽度
                var textNodeWidth = textNode.clientWidth
                //初始化滚动
                initScroll(el, textNode, boxWidth, textNodeWidth)
            }
        })
    }
}

//初始化滚动
//1.先计算容器宽度，并缓存宽度
//2.创建文本容器存放文本，并计算文本元素的宽度
//3.计算滚动距离，使用css3位移属性进行滚动，配合定时器做出滚动效果
function initScroll(el, textNode, boxWidth, textNodeWidth) {
    //滚动间隔(毫秒)
    var interval = 30
    //动画暂停时间(毫秒)
    var rest_time = 40
    //判断内容是否溢出
    if (textNodeWidth > boxWidth) {
        //外层容器超出隐藏
        el.style.overflow = 'hidden'

        var now_position = 0 //当前位置 默认0
        var direction = 'left' //移动方向 一开始向左移动，到顶后向右移动
        //移动距离
        var target = boxWidth - textNodeWidth
        //使用定时器实时修改位移
        var timer = setInterval(() => {
            //判断是否处于暂停状态 只有不是暂时状态才进行移动
            if (rest_time <= 0) {
                //方向判断
                if (direction == 'left') {
                    now_position--
                } else {
                    now_position++
                }
                //如果左移到底 则调转方向向右
                if (now_position < target) {
                    direction = 'right'
                    //重置暂停动画的时间
                    rest_time = 20
                }
                //如果右移到底 则调转方向向左 并暂停一段时间
                if (now_position > 0) {
                    direction = 'left'
                    //重置暂停动画的时间
                    rest_time = 40
                }
                //更新位置
                textNode.style.transform = `translateX(${now_position}px)`
            }
            //减少暂时状态的时间
            if (rest_time > 0) {
                rest_time--
            }
        }, interval)
        //将定时器id挂载到容器中
        el.scroll_id = timer
    } else {
        //定时器id
        el.scroll_id = null
    }
}

//生成存放文本的元素
function createTextNode(value) {
    //创建容器装载文本
    var textNode = document.createElement('span')
    textNode.style.display = 'inline-block'
    //不允许换行
    textNode.style.whiteSpace = 'nowrap'
    //将内容填入容器中
    textNode.innerHTML = value
    //返回
    return textNode
}